<template>
    <div style="width: 100%">
      <el-row>
        <el-col :span="24" style="background-color: #b1b3b8">
          <p style="font-size: 24px ;text-align: center; margin: 16px 0">进销存管理系统</p></el-col>
      </el-row>

      <div style="width: 100%;position: absolute;top: 0;left: 20px">
        <div v-if="loginUser == ''">你好，请先
          <router-link to="/login" style="margin: 10px 0">登陆</router-link>
        </div>
        <div v-else style="margin: 20px 10px">欢迎光临，{{ loginUser.userName }}
          <router-link to="/login" style="margin: 20px">退出</router-link>
        </div>

      </div>

      <el-row>
        <el-col :span="4" style="height: 790px ;background-color: #545c64">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
          >

            <el-sub-menu index="1" v-if="div1">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>资料管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="$router.push('/index/supplier')">供应商管理</el-menu-item>
                <el-menu-item index="1-2" @click="$router.push('/index/customer')">客户管理</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2"  v-if="div2">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>采购管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="$router.push('/index/buyerCar')">采购入库</el-menu-item>
                <el-menu-item index="2-2" @click="$router.push('/index/buyer')">采购信息查询</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="3"  v-if="div3">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>销售管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="$router.push('/index/saleCar')">销售出库</el-menu-item>
                <el-menu-item index="3-2" @click="$router.push('/index/sale')">销售信息查询</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="4"  v-if="div4">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>库存管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1" @click="$router.push('/index/product')">库存一览</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="5"  v-if="div5">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>统计信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1" @click="$router.push('/index/statisticsAll')">销售统计</el-menu-item>
                <el-menu-item index="5-2" @click="$router.push('/index/statisticsYear')">月销售统计</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="6"  v-if="div6">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>权限管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="6-1" @click="$router.push('/index/user')">用户管理</el-menu-item>
                <el-menu-item index="6-2" @click="$router.push('/index/role')">角色管理</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>


            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>个人信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="7-1" @click="$router.push('/index/updatePwd')">修改密码</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="8"   v-if="div7">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>日志信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="8-1" @click="$router.push('/index/journal')">日志一览</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-col>

        <el-col :span="20">
          <router-view/>
        </el-col>
      </el-row>
    </div>

  </template>

  <script>
    import axios from "axios";
    export default {
      data() {
        return {
          loginUser:'',
          user:{},
          roles:[],
          div1:false,
          div2:false,
          div3:false,
          div4:false,
          div5:false,
          div6:false,
          div7:false,
          int:0,
          role:[1,2,3,4,5,6,7],
        }
      },
      methods: {
        getLoginUser() {
          axios.get("/project/user/getLoginUser").then(resp => {
            this.loginUser = resp.data;
            this.findById(this.loginUser.id)
          })
        },
        findById(id){
          this.roles=[];
          axios.get("/project/user/findById",{params:{
              id
            }}).then(resp=>{
            this.user=resp.data;
            this.user.roleList.forEach(n=>{
              this.roles.push(n.id)
              console.log(this.roles);
            })
            for (let i = 0; i <this.role.length ; i++) {
              for (let j = 0; j <this.roles.length ; j++) {
                if (this.role[i]==this.roles[j]){
                  this.int=i+1;
                  if (this.int==1){
                    this.div1=true;
                    this.div2=true;
                    this.div3=true;
                    this.div4=true;
                    this.div5=true;
                    this.div6=true;
                    this.div7=true;
                  }
                  if (this.int==2){
                    this.div3=true;
                  }
                  if (this.int==3){
                    this.div1=true;
                  }
                  if (this.int==4){
                    this.div2=true;
                  }
                  if (this.int==5){
                    this.div4=true;
                  }
                  if (this.int==6){
                    this.div5=true;
                  }
                }
              }
            }
          })
        },
      },
      created() {
        this.getLoginUser();
      }
    }
  </script>

  <style scoped>

  </style>